<!-- Header.vue -->
<template>
  <el-header>
    <div class="header-content">
      <div class="logo">{{ system?.systemName }}</div>
      <nav class="nav">
        <a
          aria-current="page"
          href="/comment/user/commentFormList"
          class="router-link-active router-link-exact-active"
          >我要留言</a
        >
        <a href="/comment/user/commentList">查看留言</a>
        <a v-if="system.officialWebsiteUrl" :href="system.officialWebsiteUrl">返回主站</a>
        <a v-if="!hasToken" @click.prevent="handleLogin">未登录</a>
        <a v-if="hasToken" @click.prevent="handleLogout">退出登录</a>
      </nav>
    </div>
  </el-header>
</template>

<script setup>
import { ref } from 'vue'
import { getToken } from '@ruifox-cms/utils'
import { selectsystem } from '@/api/setting'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const store = useStore()
const router = useRouter()
const hasToken = ref(!!getToken())

// 初始化 system 为一个空对象
const system = ref({
  systemName: "",
  copyrightInfo: "",
  copyrightInfoUrl: "",
  icpRecordNumber: "",
  icpRecordUrl: "",
  beianRecordNumber: "",
  beianRecordUrl: ""
})

// // 获取设置信息
const getInfo = async () => {
  const res = await selectsystem()
  system.value = res.data[0] // 确保 res.data[0] 是一个对象
  // console.log("res", res)
  console.log("system.value", system.value)
}
getInfo()


const handleLogin = () => {
  if (process.env.NODE_ENV === 'development') {
    window.location.href = location.protocol + '//' + location.hostname + ':8100/login/index?redirect=' + location.href
  } else {
    window.location.href = location.origin + '/ram/login/index?redirect=' + location.href
  }
}

const handleLogout = () => {
  ElMessageBox.confirm('确定退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    store.dispatch('base/logout').then(() => {
      ElMessage.success('已退出登录')
      hasToken.value = false
      router.push('/recruitment/user/jobs')
    })
  })
}
</script>

<style scoped lang="scss">
.app-header {
  background-color: #f8f9fa;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.el-header {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: fixed;
  left: 0;
  width: 100%;
  top: 0;
  z-index: 100;
  box-sizing: border-box;
}
.header-content {
  max-width: 1200px;
  margin: 0 auto;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  .logo {
    font-size: 24px;
    font-weight: bold;
    color: $mainColor;
  }
  .nav {
    a {
      margin-left: 20px;
      color: #606266;
      text-decoration: none;
      font-size: 14px;
      &:hover {
        color: $mainColor;
      }
    }
  }
}
</style>
